<template>
  <div>
    <el-card>
      <el-descriptions class="margin-top" title="简介" :column="2" border>
        <template slot="extra">
          <el-button type="primary" @click="edit" size="small">操作</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture-outline"></i>
            头像
          </template>
          <img class="img" :src="sysUserAvatar" alt="" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            账户名
          </template>
          {{employeeInfo.username}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom"></i>
            昵称
          </template>
          {{employeeInfo.nickname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-odometer"></i>
            年龄
          </template>
          {{employeeInfo.age}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-male"></i>
            <i class="el-icon-female"></i>
            性别
          </template>
          <el-tag size="small">{{ employeeInfo.sex=="1"?"男":"女" }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            邮箱Email
          </template>
          {{employeeInfo.email}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号码
          </template>
          {{employeeInfo.phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            地区
          </template>
          {{employeeInfo.region}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            职业
          </template>
          {{employeeInfo.job}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-basketball"></i>
            兴趣爱好
          </template>
          {{employeeInfo.hobbies}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-magic-stick"></i>
            个性签名
          </template>
          {{employeeInfo.intro}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-date"></i>
            注册日期
          </template>
          {{employeeInfo.registerTime}}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <personal-dia ref="dia" @flesh="getEmployeeById"/>
  </div>
</template>

<script>
import PersonalDia from "./PersonalDia";

export default {
  components: { PersonalDia },
  data(){
    return{
      id:"",
      // 用户信息
      employeeInfo: {registerTime:""},
      sysUserAvatar:""
    }
  },
  methods:{
    getEmployeeById(){
      this.$http.get("/employee/getInfoById/"+this.id).then(result=>{
        result = result.data;
        this.employeeInfo = result.object;
        this.sysUserAvatar = "/api/employee/avatarDownLoad/"+this.id+'?'+new Date().getTime();
      })
    },
    edit(){
      this.$refs.dia.open();
    },
    flesh(){
      this.getEmployeeById();
      this.$emit("HomeFlesh")
    },
  },
  beforeMount() {
    // 传入id
    this.id = JSON.parse(localStorage.getItem('loginUser')).id;
    this.getEmployeeById();
  }
}
</script>

<style lang="scss" scoped>
img {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  margin: 10px 0px 10px 10px;
  float: none;
  align-content: center;
}
.page-container {
  font-size: 20px;
  text-align: center;
  color: rgb(192, 204, 218);
}
</style>